<template>
    <div class="common-layout">
        <el-container class="register-container">
            <!--头部区域-->
            <el-header class="register-header">
                <div>
                    <el-icon style="margin-left: 10px;">
                        <MoonNight />
                    </el-icon>
                    <span>
                        东软颐养中心
                    </span>
                </div>
            </el-header>
            <el-main class="register-main">
                <div class="register-main-left">
                    <img src="../assets/loginPic.jpg" alt="picture">
                </div>
                <div class="register-main-right">
                    <el-card class="register-main-right-card">
                        <el-form class="register-main-right-card-form" ref="registerFormRef" :model="registerForm"
                            :rules="registerFormRules">
                            <div class="register-main-right-card-form-header">
                                欢迎使用
                            </div>
                            <!--用户名-->
                            <el-form-item prop="username">
                                <el-input v-model="registerForm.username" :prefix-icon="User"
                                    placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <!--密码-->
                            <el-form-item prop="password">
                                <el-input v-model="registerForm.password" :prefix-icon="Lock" type="password"
                                    show-password placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <!--再次确认密码-->
                            <el-form-item prop="confirmPassword">
                                <el-input v-model="registerForm.confirmPassword" :prefix-icon="Lock" type="password"
                                    show-password placeholder="请再次输入密码"></el-input>
                            </el-form-item>
                            <!--按钮区-->
                            <el-form-item class="btns">
                                <el-button color="#578BBA" @click="register"
                                    style="width: 100%;color: #ffffff">注册</el-button>
                            </el-form-item>
                            <!-- 去注册按钮或方式 -->
                            <div class="login-link">
                                已有账号？
                                <router-link to="/login">去登录</router-link>
                            </div>
                        </el-form>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue';
import * as user from '@/api/user.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
const router = useRouter();

//表单引用
const registerFormRef = ref()

//表单数据的绑定对象
const registerForm = reactive({
    username: '',
    password: '',
    confirmPassword: ''
})
const register = () => {
    const data = reactive({
        accUsername: registerForm.username,
        accPassword: registerForm.password,
    })
    user.registerAPI(data).then((resp) => {
        if (resp.data.code !== 2000) {
            ElMessage({
                type: 'error',
                message: resp.data.message,
            })
            return
        }
        ElMessage({
            type: 'success',
            message: '注册成功',
        })
        router.push({ path: "/login" });

    })

}

//表单校验对象
const registerFormRules = reactive({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 1, max: 10, message: '用户名长度1~10个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 3, max: 10, message: '密码长度3~10个字符', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '确认密码不能为空', trigger: 'blur' },
        { min: 3, max: 10, message: '确认密码长度3~10个字符', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== registerForm.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ]
})

</script>

<style lang="less" scoped>
.register-container {
    height: 100vh;
}

.register-header {

    background-color: #578BBA;
    display: flex;
    justify-content: space-between;
    padding-left: 0%;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 3px;
    font-size: 30px;
    font-weight: bold;

    >div {
        display: flex;
        align-items: center;

        span {
            margin-left: 15px;
        }

        img {
            width: 50px;
            height: 50px;
            margin-left: 20px;
        }

    }
}

.register-main {
    background-color: #E9E9E9;
    display: flex;
    justify-content: space-evenly;
}

.register-main-left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-main-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-main-right-card {
    width: 350px;
    height: 70%;
    display: flex;
    flex-direction: column;
}

.register-main-right-card-form-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 30px;
    letter-spacing: 8px;
    margin-bottom: 20px;
    margin-top: 20px;
    color: #578BBA;
}

.register-main-right-card-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.el-form-item {
    margin-top: 20px;
}

.el-input {
    width: 100%;
}

.btns {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-link {
    margin-left: auto;
    font-size: 14px;
}

.login-link a {
    color: blue;
    text-decoration: underline;
    transition: color 0.3s, text-decoration 0.3s;
}

.login-link a:hover {
    color: #50BCB6;
    text-decoration: none;
}
</style>
